<nav class="navbar navbar-default" th:fragment="header" style="margin-bottom: 40px;">
    <style>
        .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
            background-color: #e7e7e7;
        }
    </style>
    <script>
        $(document).ready(function () {

            $("#logout").click(function () {
                $.ajax({
                    type: "post",
                    url: "/logout",
                    timeout: 600000,
                    success: function () {
                        window.location.href = "/login";
                    },
                    error: function (e) {
                        console.log(e);
                    },
                    // add csrf header and token
                    beforeSend: function (xhr) {
                        let header = $("meta[name='_csrf_header']").attr("content");
                        let token = $("meta[name='_csrf']").attr("content");
                        xhr.setRequestHeader(header, token);
                    }
                });
            });

        });
    </script>

    <div class="container">
        <div class="row">
            <div class="col-sm-offset-1 col-sm-10">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="/">Home</a>
                </div>

                <div class="collapse navbar-collapse" id="myNavbar">

                    <ul class="nav navbar-nav navbar-right">
                        <!-- write a article -->
                        <li><a href="/article/new" class="glyphicon glyphicon-plus"></a></li>

                        <!-- show tags -->
                        <li th:if="${isIndex}">
                            <a class="glyphicon glyphicon-triangle-left"
                               id="sidebar-toggle"></a>
                        </li><!-- show tags -->

                        <li>
                            <a class="glyphicon glyphicon-tag" href="/tag"></a>
                        </li>

                        <!-- dropdown -->
                        <li class="dropdown" style="margin-right: -15px;">
                            <a class="dropdown-toggle glyphicon glyphicon-user"
                               data-toggle="dropdown" href="#">
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#" id="logout">Logout</a></li>
                                <li><a href="https://github.com/ziwenxie/leafer" target="_blank">GitHub</a></li>
                            </ul>
                        </li><!-- dropdown -->
                    </ul>

                </div><!-- navbar collapse -->

            </div><!-- col -->

        </div><!-- row -->

    </div><!-- container -->

</nav>
